<!doctype html>
<html>
	<head>
		<title> Test PUI style with angular -- test </title>
		<link rel="stylesheet" href="../jquery-ui/jquery-ui-1.9.2.custom.min.css" />
		<link rel="stylesheet" href="../production/primeui-1.0-min.css" />
		<link rel="stylesheet" href="../themes/aristo/theme.css" />
	</head>

	<body ng-controller="MainCtrl">

	<div pui-test=""></div>

	<script type="text/javascript" src="angular.min.js"></script>
	<script language="javascript">
	var md = angular.module('md', []);

	md.directive('puiTest', function(){
		return {
			transclude: true, 
			compile: function(el, attrs, tanscludeFn){
				el.after('<div ng-bind="aa" ng-click="check()"></div>');
				return function(scope, el, attrs){
//					tanscludeFn(scope, function(clone){
//						clone.after('<div ng-bind="aa" ng-click="check()"></div>');
//					});
					scope.check = function(){
						scope.aa = 'bb';
					};
				};
			}
		};
	});

	// ******************
	md.controller('MainCtrl', function($scope){
		$scope.aa = 'xxx';
	});

	angular.bootstrap(document, ['md']);
	</script>
	</body>
</html>